<template>
	<view class="content">

		<!-- 轮播图 -->
		<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
		<swiper style="height: 350rpx;" previous-margin="0" next-margin="0" @change="handlechange" :current="mycurrent"
			:indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in lunbotu" :key="index" @click="journalism(index)">
				<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
					<img :src="item" style="width: 100%;height: 100%;">
				</view>
			</swiper-item>
		</swiper>

		<view class="">
			<view class="one">
				<view class="title">
					<image src="@/static/activity/healthHome/pzsh.png" mode=""></image>
				</view>
				<view class="one-dis">
					<view class="forr1" v-for="(item, idx) in list1" v-if="idx <= 3" @click="tiaozhuan(item.id)">
						<image :src="item.imgs" mode=""></image>
						<!-- <view class="left" @click="applet(list1[0].id)">
						<image :src="list1[0].imgs" mode=""></image>
					</view>
					<view class="right">
						<image :src="list1[1].imgs" mode="" @click="applet(list1[1].id)"></image>
						<image class="bottom" :src="list1[2].imgs" mode="" @click="tiaozhuan(list1[2].id)"></image>
					</view> -->
					</view>
				</view>

				<view class="two-dis">
					<view class="forr2" v-for="(item, idx) in list1" v-if="idx > 3" @click="tiaozhuan(item.id)">
						<image :src="item.imgs" mode=""></image>
					</view>
				</view>
			</view>

			<view class="two">
				<view class="two-for" v-for="(item, idx) in list2" @click="tiaozhuan(item.id)">
					<image :src="item.imgs" mode=""></image>
				</view>
			</view>

			<view class="three">
				<view class="title">
					<image src="@/static/activity/healthHome/jksh.png" mode=""></image>
				</view>
				<view class="three-dis">
					<view class="three-for" v-for="(item, idx) in list3" @click="tiaozhuan(item.id, item.name)">
						<image :src="item.imgs" mode=""></image>
						<view class="">{{item.name}}</view>
					</view>
				</view>
			</view>

			<view class="four">
				<view class="title">
					<image src="@/static/activity/healthHome/axhz.png" mode=""></image>
				</view>
				<view class="four-dis">
					<view class="four-for" v-for="(item, idx) in list4" @click="tiaozhuan(item.id, item.name)">
						<image :src="item.imgs" mode=""></image>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	var sweixin;
	export default {
		data() {
			return {
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				user: uni.getStorageSync("member"),
				code: null, //传入厂牌号
				ress: {},
				strr: '',
				ttsxAuthSign: '',
				sweixin: '',
				mycurrent: 0,
				lunbotu: [
					"http://jf2.boyaltd.cn/new_app/HHlbt/lbt1.png",
					"http://jf2.boyaltd.cn/new_app/HHlbt/lbt2.png"
				],
			}
		},
		onLoad(opt) {
			if (opt.Bearer) {
				uni.setStorageSync("Bearer", opt.Bearer);
				this.bearer();
			} else if (opt.code) {
				this.loginx(code);
			} else {
				this.user = uni.getStorageSync("member");
			}
			this.WeChat();
			this.data_list();
		},
		methods: {
			sort_asc(data) {
				let self = this
				self.list1 = data.sort((a, b) => a.note - b.note)
				self.list1.push()
			},
			WeChat() {
				// #ifdef APP-PLUS
				plus.share.getServices(function(s) {
					var shares = {};
					for (var i = 0; i < s.length; i++) {
						var t = s[i];
						console.log('WeChat-t: ', t);
						shares[t.id] = t;
						console.log('WeChat-t.id: ', t.id);
					}
					sweixin = shares['weixin'];
				}, function(e) {
					console.log("获取分享服务列表失败：" + e.message);
				});
				// #endif
			},
			bearer() {
				let self = this
				this.$boya.NGet("/app/auth/user", null, function(res) {
					console.log("bearer: ", res);
					uni.hideLoading();
					self.user = res.data.member;
					uni.setStorageSync("user", res.data.member);
				}, err => {
					console.log('bearerErr: ', err);
					uni.showToast({
						title: '登录失败,请重试',
						duration: 2000,
						icon: 'error'
					});
				}, false, false)
			},
			loginx(code) {
				let self = this
				console.log('code: ', code);
				self.$boya.Request({
					url: '/public/loginx',
					data: {
						code: code,
					}
				}, function(res) {
					console.log("loginx", res);
					if (res.code == 200) {
						self.user = res.data
						uni.setStorageSync("user", res.data);
					} else {
						uni.showToast({
							title: '登录失败,请重试',
							duration: 2000,
							icon: 'error'
						});
					}
				}, false)
			},
			applet(id) {
				let appid = null
				let path = null
				if (id == '190') {
					// 惠享超市
					appid = "gh_10eed032e096";
					path = "/pages/index/index"
				} else if (id == '191') {
					// 酒店服务
					appid = "gh_9ac906421a76";
					path =
						"pages/ticket/custom-poster/custom-poster?customId=11540&tj_bm_user_id=1153446&source=official_shop&hid=189820&zkt_scene=sale&zkt_sign=1-c2669763e067bfc95ec192979d564740&fs=221852266"
				} else if (id == '201') {
					// 柳钢医院
					appid = "gh_bbd5e3973907";
					path = "/pages/index/index"
				}
				uni.hideLoading();
				// #ifdef H5
				console.log("H5H5H5H5H5H5H5H5");
				uni.webView.postMessage({
					data: {
						type: "open_wexin",
						data: {
							app_id: appid,
							path: path
						}
					},
				})
				// #endif
				// #ifdef APP-PLUS
				console.log("APP-PLUSAPP-PLUSAPP-PLUS");
				sweixin ? sweixin.launchMiniProgram({
					id: appid,
					path: path
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				// #endif
			},
			data_list() {
				var self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 22,
					}
				}, function(res) {
					let lunbotu = JSON.parse(res.data.activity.swiper)
					self.lunbotu = lunbotu
					let data = res.data.data
					console.log('data: ', data);
					for (var i = 0; i < data.length; i++) {
						if (data[i].imgs) {
							let img = data[i].imgs.substring(2, data[i].imgs.length - 2);
							data[i].imgs = img
						}
						let children = data[i].children
						for (var j = 0; j < children.length; j++) {
							if (children[j].imgs) {
								let img = children[j].imgs.substring(2, children[j].imgs.length - 2);
								children[j].imgs = img
							}
						}
						if (data[i].name == '品质生活1') {
							self.sort_asc(data[i].children);
						} else if (data[i].name == '品质生活2') {
							self.list2 = data[i].children
						} else if (data[i].name == '健康生活') {
							self.list3 = data[i].children
						} else if (data[i].name == '爱心互助') {
							self.list4 = data[i].children
						}
					}
				}, false)
			},
			tiaozhuan(id) {
				console.log('id: ', id);
				let self = this
				uni.showLoading({
					title: '正在加载...'
				});
				if (id == '190') {
					// 惠享超市
					self.applet(id);
					uni.hideLoading();
				} else if (id == '191') {
					// 酒店服务
					self.applet(id);
					uni.hideLoading();
				} else if (id == '232') {
					// 中医康养
					this.$boya.NGet("/tpi/mcode", null, function(res) {
						console.log("mcode", res);
						uni.showLoading({
							title: '正在获取登录信息...'
						});
						let code = res.data;
						let _url = 'https://lgzy.boyaltd.cn/h5/#/?token=' + code
						window.location.href = _url
						uni.hideLoading();
					}, function(err) {
						console.log('mcodeErr: ', err);
					})
				} else if (id == '197') {
					let url = 'https://new.lgwisdomunion.cn/api/tpi/wph/login'
					// self.$comm.nav_to(url, "唯品会")
					self.external(id, url);
					uni.hideLoading();
				} else if (id == '198') {
					let url = 'https://new.lgwisdomunion.cn/api/app/meifu_login'
					// self.$comm.nav_to(url, "美的")
					self.external(id, url);
					uni.hideLoading();
				} else if (id == '199') {
					let url = 'https://lg.boyaltd.cn/H5/faq'
					self.external(id, url);
					// self.$comm.nav_to(url, "健康助手")
					uni.hideLoading();
				} else if (id == '200') {
					// 健康驿站
					self.station(id);
					uni.hideLoading();
				} else if (id == '201') {
					// 柳钢医院
					self.applet(id);
					uni.hideLoading();
				} else if (id == '202') {
					// 职工疗养
					self.convalesce();
					uni.hideLoading();
				} else if (id == '203') {
					// 营养膳食
					self.menu();
					uni.hideLoading();
				} else {
					// 富文本
					self.rich_text(id);
					uni.hideLoading();
				}
			},
			convalesce() {
				let appid = "gh_2d2f81d8b114";
				let path = "pagesA/my/address/editAddressmp"
				// #ifdef H5
				console.log("H5H5H5H5H5H5H5H5");
				uni.webView.postMessage({
					data: {
						type: "open_wexin",
						data: {
							app_id: appid,
							path: path
						}
					},
				})
				// #endif
				// #ifdef APP-PLUS
				console.log("APP-PLUSAPP-PLUSAPP-PLUS");
				sweixin ? sweixin.launchMiniProgram({
					id: appid,
					path: path
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				// #endif
			},
			station() {
				uni.navigateTo({
					url: '/pages/activities/healthHome/secondLevel/healthStation'
				})
			},
			menu() {
				uni.navigateTo({
					url: '/pages/activities/healthHome/secondLevel/menu'
				})
			},
			rich_text(id) {
				uni.navigateTo({
					url: '/pages/activities/healthHome/index/richText?id=' + id
				})
			},
			erji(name) {
				uni.navigateTo({
					url: '/pages/activities/healthHome/secondLevel/secondLevel?name=' + name
				})
			},
			handlechange(e) {
				this.mycurrent = e.detail.current
			},
			skip(id) {
				let self = this
				if (id == 197) {
					// 唯品会 
					window.location.href = 'https://lgadmin.lgwisdomunion.cn/api/tpi/wph/login?uuid=' + this.user.uuid
					setTimeout(() => {
						uni.hideLoading();
					}, 8000);
				} else if (id == 198) {
					// 美的
					let self = this
					let url = 'https://new.lgwisdomunion.cn/api/app/meifu_login'
					uni.request({
						url: url,
						method: "POST",
						data: {
							mobile: self.user.phone,
							user_name: self.user.name,
							account: self.user.lg_id
						},
						success(res) {
							console.log('链接: ', res.data.data.data.JumpLink);
							window.location.href = res.data.data.data.JumpLink
							uni.hideLoading();
						}
					})
				}
			},
			external(id, url) {
				// windows跳转
				let self = this
				uni.showLoading({
					title: '加载中...'
				});
				if (id == 197) {
					// 唯品会
					uni.request({
						url: url,
						method: "GET",
						data: {
							uuid: self.user.uuid
						},
						success(res) {
							console.log('我是唯品会data: ', res.data);
							if (res.data.code == 200) {
								let _url = res.data.data.data.JumpLink
								window.location.href = _url
								console.log('唯品会链接: ', res.data.data.data.JumpLink);
							} else {
								self.$boya.msg(res.msg)
							}
						}
					})
					setTimeout(function() {
						uni.hideLoading();
					}, 8000);
					return;
				} else if (id == 198) {
					// 美的
					uni.request({
						url: url,
						method: "POST",
						data: {
							// mobile: 13877211150,
							// user_name: '魏颖斌',
							// account: 81601008,
							mobile: self.user.phone,
							user_name: self.user.name,
							account: self.user.lg_id
						},
						success(res) {
							console.log('我是新美福data: ', res.data);
							if (res.data.code == 200) {
								let _url = res.data.data.data.JumpLink
								window.location.href = _url
								console.log('新美福链接: ', res.data.data.data.JumpLink);
							} else {
								self.$boya.msg(res.msg)
							}
						}
					})
					setTimeout(function() {
						uni.hideLoading();
					}, 8000);
					return;
				} else if (id == 199) {
					this.$boya.NGet("/tpi/mcode", null, function(res) {
						console.log("健康助手codeRes", res);
						url = url + "?code=" + res.data;
						window.location.href = url
					}, function(err) {
						console.log('健康助手codeErr: ', err);
					})
				} else {
					uni.showLoading({
						title: '加载中...'
					});
					window.location.href = url
					setTimeout(function() {
						uni.hideLoading();
					}, 8000);
				}
			},
		},
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.swiper-item {
		/* border-radius: 30rpx; */
		overflow: hidden;
		/* 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果 */
		/* 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了 */
		width: 100vw;
		height: 350rpx;
		transform: scale(0.8);
		transition: all 0.5s ease;
		text-align: center;
		transition: all 0.5s ease-in-out;

		&.active {
			transform: scale(1);
		}
	}

	.one {
		width: 100%;
		margin-top: 40rpx;
		background-color: white;
	}

	.title {
		width: 360rpx;
		margin: 0 auto;
		height: 55rpx;
		padding: 30rpx 0;
	}

	.title>image {
		width: 100%;
		height: 100%;
	}

	.one-dis {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forr1>image {
		width: 330rpx;
		height: 186rpx;
		margin-bottom: 30rpx;
	}

	.left {
		flex: 1;
	}

	.right {
		flex: 2;
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
	}

	.left>image {
		width: 330rpx;
		height: 395rpx;
	}

	.right>image {
		width: 330rpx;
		height: 184rpx;
	}

	.bottom {
		margin-top: 30rpx;
	}

	.two-dis {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forr2>image {
		width: 330rpx;
		height: 100rpx;
		margin-bottom: 30rpx;
	}

	.two {
		width: 100%;
		background-color: white;
		margin-top: 40rpx;
		padding: 35rpx 0;
		display: flex;
		justify-content: space-evenly;
	}

	.two-for>image {
		width: 330rpx;
		height: 200rpx;
	}

	.three {
		width: 100%;
		margin-top: 40rpx;
		background-color: white;
	}

	.three-dis {
		width: 96%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.three-for {
		text-align: center;
		color: #656566;
		margin-top: 15rpx;
		padding-bottom: 25rpx;
	}

	.three-for>image {
		width: 60rpx;
		height: 55rpx;
	}

	.three-for>view {
		margin-top: 15rpx;
		font-size: 30rpx;
	}

	.four {
		width: 100%;
		margin-top: 40rpx;
		background-color: white;
	}

	.four-dis {
		width: 96%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	}

	.four-for {
		padding-bottom: 30rpx;
	}

	.four-for>image {
		width: 215rpx;
		height: 300rpx;
	}
</style>